<span class="fontGray">Help file for Step 5</span>
        <div class="hr"></div>
        <ul class="tabs"> 
            <li class="active tabSetting" rel="tab1"> 1) Form Settings Panel</li>
            <li class="tabSetting" rel="tab2"> 2) Add Fields Panel</li>
            <li class="tabSetting" rel="tab3"> 3) Form View Panel</li>
            <li class="tabSetting" rel="tab4"> 4) Workflow View</li>
        </ul>
        <div class="tab_container" style="height: 500px;"> 
            <div id="tab1" class="tab_content" style="display: block;">
                <div style="float: left;padding: 5px;width: 100%;margin-top: 5px;">
                    <div style="float: left;width: 100%;">
                        <label style="margin-left: 5px;">Field Settings</label><br />
                        <div style="margin-left: 15px;margin-top: 5px;margin-bottom: 10px;">
                            <label style="margin-left: 5px;"><b style="color: #000;">Field Label</b> - a button to create new workspace.</label> <br />
                            <label style="margin-left: 5px;"><b style="color: #000;">Field Size</b> - a button to create new workspace.</label> <br />
                            <label style="margin-left: 5px;"><b style="color: #000;">Options</b> - a button to create new workspace.</label> <br />
                        </div>
                        <label style="margin-left: 5px;">Form Settings</label><br />
                        <div style="margin-left: 15px;margin-top: 5px;margin-bottom: 10px;">
                            <label style="margin-left: 5px;"><b style="color: #000;">Form Name</b> - a button to create new workspace.</label> <br />
                            <label style="margin-left: 5px;"><b style="color: #000;">Description</b> - a button to create new workspace.</label> <br />
                            <label style="margin-left: 5px;"><b style="color: #000;">Label Placement</b> - a button to create new workspace.</label> <br />
                            <label style="margin-left: 5px;"><b style="color: #000;">Status of request if the processor is updated</b> - a button to create new workspace.</label> <br />
                            <label style="margin-left: 5px;"><b style="color: #000;">Users</b> - a button to create new workspace.</label> <br />
                        </div>
                        <label style="margin-left: 5px;">Workflow</label><br />
                        <div style="margin-left: 15px;margin-top: 5px;margin-bottom: 10px;">
                            <label style="margin-left: 5px;"><b style="color: #000;">Processor Type</b> - a button to create new workspace.</label> <br />
                            <label style="margin-left: 5px;"><b style="color: #000;">Processor</b> - a button to create new workspace.</label> <br />
                            <label style="margin-left: 5px;"><b style="color: #000;">Action Status</b> - a button to create new workspace.</label> <br />
                            <label style="margin-left: 5px;"><b style="color: #000;">Processor Buttons if the processor is updated</b> - a button to create new workspace.</label> <br />
                        </div>
                    </div>
                </div>
            </div>
            <div id="tab2" class="tab_content">
                <div style="float: left;">
                    <label style="margin-left: 5px;">Add Fields Panel</label><br />
                    <div style="margin-left: 20px;margin-top: 10px;">
                        <label style="margin-left: 5px;">
                            <img src="/images/steps/step5-html.png"> <br />
                            - All button on the add fields panel is available to create you a form.
                        </label>
                    </div>
                </div>
            </div>
            <div id="tab3" class="tab_content">
                <div style="float: left;">
                    <div style="margin-left: 20px;margin-top: 10px;">
                        <label style="margin-left: 5px;">
                            - On the form view as you can see there is a default content on you form, to edit/modify that just click it.
                        </label><br />
                            <img src="/images/steps/step5-FV.png">
                        <br />
                        <div class="hr"></div>
                        <div style="float: left;width: 50%;">
                            <img src="/images/steps/step5-fvSettings.png" style="height: 200px;width: 300px;">
                        </div>
                        <div style="float: left;width: 50%;">
                            <label style="margin-left: 5px;">
                                - After clicking the highlighted content, the tab of the first panel show some settings of it to edit/set.
                            </label>
                            <div style="margin-left: 15px;margin-top: 5px;margin-bottom: 10px;">
                                <label style="margin-left: 5px;"><b style="color: #000;">Form Name</b> - a button to create new workspace.</label> <br />
                                <label style="margin-left: 5px;"><b style="color: #000;">Description</b> - a button to create new workspace.</label> <br />
                                <label style="margin-left: 5px;"><b style="color: #000;">Label Placement</b> - a button to create new workspace.</label> <br />
                                <label style="margin-left: 5px;"><b style="color: #000;">Status of request if the processor is updated</b> - a button to create new workspace.</label> <br />
                                <label style="margin-left: 5px;"><b style="color: #000;">Users</b> - a button to create new workspace.</label> <br />
                            </div>
                        </div>
                        <div class="hr"></div>
                        <div style="float: left;width: 100%;">
                            <label style="margin-left: 5px;">
                                - by selecting html objects on panel 2, choose any of them to create your own form. <br />
                                - when you've already done adding some fields into your form, just click it and the setting will show to modify the highlighted content.
                                
                            </label><br />
                                <img src="/images/steps/step5-fvset1.png">
                        </div>
                        <div class="hr"></div>
                        <div style="float: left;width: 50%;">
                            <img src="/images/steps/step5-fSet.png" style="height: 200px;width: 300px;">
                        </div>
                        <div style="float: left;width: 50%;">
                            <label style="margin-left: 5px;">
                                - After clicking the highlighted content, the tab of the first panel show some settings of it to edit/set.
                                <br />
                                <div style="margin-left: 15px;margin-top: 5px;margin-bottom: 10px;">
                                    <label style="margin-left: 5px;"><b style="color: #000;">Form Name</b> - a button to create new workspace.</label> <br />
                                    <label style="margin-left: 5px;"><b style="color: #000;">Description</b> - a button to create new workspace.</label> <br />
                                    <label style="margin-left: 5px;"><b style="color: #000;">Label Placement</b> - a button to create new workspace.</label> <br />
                                    <label style="margin-left: 5px;"><b style="color: #000;">Status of request if the processor is updated</b> - a button to create new workspace.</label> <br />
                                    <label style="margin-left: 5px;"><b style="color: #000;">Users</b> - a button to create new workspace.</label> <br />
                                </div>
                            </label>
                        </div>
                    </div>
                    
                </div>
                
            </div>
            <div id="tab4" class="tab_content">
                <div style="float: left;width: 50%;margin-top: 10px;">
                    <label style="margin-left: 5px;">
                        - set/choose user of your node in the workflow.
                    </label> <br />
                    <img src="/images/steps/step5-wofkflow1.png">
                </div>
                <div style="float: left;width: 50%;margin-top: 10px;">
                    <label style="margin-left: 5px;">
                        - set up the action of every approver for the request by adding some buttons of it.
                    </label> <br />
                    <img src="/images/steps/step5-workflow2.png">
                </div>
                <div style="float: left;width: 100%;margin-top: 10px;">
                    <label style="margin-left: 5px;">
                        <div style="margin-left: 15px;margin-top: 5px;margin-bottom: 10px;">
                            <label style="margin-left: 5px;"><b style="color: #000;">Processor Type</b> - a button to create new workspace.</label> <br />
                            <label style="margin-left: 5px;"><b style="color: #000;">Processor</b> - a button to create new workspace.</label> <br />
                            <label style="margin-left: 5px;"><b style="color: #000;">Action Status</b> - a button to create new workspace.</label> <br />
                            <label style="margin-left: 5px;"><b style="color: #000;">Processor Buttons if the processor is updated</b> - a button to create new workspace.</label> <br />
                        </div>
                    </label>
                </div>
            </div>
        </div>